<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			width: 960px;
			margin: 0 auto;
			text-align: center;
		}

		.leftfix {
			float: left;
		}

		.rightfix {
			float: right;
		}

		.clearfix::after {
			content: '';
			display: block;
			clear: both;
		}

		.logo,
		.banner1,
		.banner2 {
			height: 80px;
			line-height: 80px;
			background-color: #ccc;
		}

		.logo {
			width: 200px;
		}

		.banner1 {
			width: 540px;
			margin: 0 10px;
		}

		.banner2 {
			width: 200px;
		}

		.menu {
			width: 100%;
			height: 30px;
			line-height: 30px;
			background-color: #ccc;
			margin: 10px 0;
		}
		.item {
			border: 1px solid black;
		}
		.item1, .item2 {
			width: 368px;
			height: 198px;
			line-height: 198px;
			margin-right: 10px;
		}
		.item3, .item4, .item5, .item6 {
			width: 178px;
			height: 198px;
			line-height: 198px;
			margin: 10px 0;
			margin-right: 10px;
		}
		.item7, .item8, .item9 {
			width: 198px;
			height: 128px;
			line-height: 128px;
			margin-bottom: 10px;
		}
		.footer {
			width: 100%;
			height: 60px;
			line-height: 60px;
			background-color: #ccc;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 导航栏 -->
		<div class="nav clearfix">
			<div class="logo leftfix">logo</div>
			<div class="banner1 leftfix">banner1</div>
			<div class="banner2 leftfix">banner2</div>
		</div>
		<!-- 菜单 -->
		<div class="menu">菜单</div>
		<!-- 内容 -->
		<div class="content clearfix">
			<!-- 左侧 -->
			<div class="left leftfix">
				<!-- 上面 -->
				 <div class="top clearfix">
					<div class="item item1 leftfix">栏目一</div>
					<div class="item item2 leftfix">栏目二</div>
				 </div>
				<!-- 下面 -->
				 <div class="bottom clearfix">
					<div class="item item3 leftfix">栏目三</div>
					<div class="item item4 leftfix">栏目四</div>
					<div class="item item5 leftfix">栏目五</div>
					<div class="item item6 leftfix">栏目六</div>
				 </div>
			</div>
			<!-- 右侧 -->
			<div class="right leftfix">
				<div class="item item7">栏目七</div>
				<div class="item item8">栏目八</div>
				<div class="item item9">栏目九</div>
			</div>
		</div>
		<!-- 页脚 -->
		<div class="footer">页脚</div>
	</div>
</body>

</html>